<template>
  <div>
    <div>
      <div>
        <el-button type="primary" @click="addBook()">添加图书</el-button>
        <table>
          <caption>
            图书列表
          </caption>
          <thead>
            <tr>
              <th>书名</th>
              <th>作者</th>
              <th>价格</th>
              <th>评分</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in booklist" :key="index">
              <td>{{ item.title }}</td>
              <td>{{ item.author }}</td>
              <td>{{ item.price }}</td>
              <td>{{ item.rating }}</td>
            </tr>
            <!-- 添加加载状态提示 -->
            <tr v-if="booklist.length === 0 && !loading">
              <td colspan="4" style="text-align: center; color: #999">暂无数据</td>
            </tr>
            <tr v-if="loading">
              <td colspan="4" style="text-align: center; color: #666">加载中...</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div>axios</div>
    <div>使用条款</div>
    <div style="height: 100px">
      <div v-html="content" style="max-height: 200px; overflow: auto"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'

const content = ref('')
import request from '../axios/request.js'

request({
  url: 'http://47.79.76.65:9991/api/config/termsOfUse',
  method: 'get',
  params: {
    page: 1,
    pageSize: 20,
  },
})
  .then((res) => {
    content.value = res.rows[0].content
    console.log(res)
  })
  .catch((err) => {
    console.log(err)
  })

//加载图书列表
const booklist = ref([])
const loading = ref(true)
onMounted(() => {
  request({
    url: '/mock/books',
    method: 'get',
  })
    .then((res) => {
      booklist.value = res.data
      console.log(res.data)
    })
    .catch((err) => {
      console.log(err)
    })
    .finally(() => {
      loading.value = false
    })
})
//添加图书
const addBook = () => {
  request({
    url: '/mock/addBook',
    method: 'post',
  })
    .then((res) => {
      console.log('aaa', res)
      booklist.value.push(res.data)
    })
    .catch((err) => {
      console.log(err)
    })
}
</script>

<style scoped></style>
